@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  }

  @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}

// 来源于：Easy retina-ready images using SCSS https://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}

// Hairlines  https://github.com/framework7io/framework7/blob/master/src/core/less/mixins.less
@mixin hairline-pseudo($color, $top, $right, $bottom, $left) {
  content: '';
  position: absolute;
  background-color: $color;
  display: block;
  // z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin hairline($position, $color){
	@if $position==top {
		&:before {
			@include hairline-pseudo($color, 0, auto, auto, 0);
			height: 1px;
			width: 100%;
			transform-origin: 50% 0%;
			// transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)))
			@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
				transform: scaleY(0.5)
			}
			@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
				transform: scaleY(.33);
			}
		}

	}
	@else if$position==right{
		&:after {
			@include hairline-pseudo($color, 0, 0, auto, auto);
			width: 1px;
			height: 100%;
			transform-origin: 100% 50%;
			// transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)))
			@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
				transform: scaleX(0.5)
			}
			@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
				transform: scaleX(.33);
			}
		}

	}@else if $position==bottom {
		&:after {
			@include hairline-pseudo($color, auto, auto, 0, 0);
			height: 1px;
			width: 100%;
			transform-origin: 50% 100%;
			// transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)))
			@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
				transform: scaleY(0.5)
			}
			@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
				transform: scaleY(.33);
			}
		}

	}@else if $position == left{
		&:before {
			@include hairline-pseudo($color, 0, auto, auto, 0);
			width: 1px;
			height: 100%;
			transform-origin: 0% 50%;
			// transform: scaleX(calc(1 / var(--f7-device-pixel-ratio)))
			@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
				transform: scaleX(0.5)
			}
			@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
				transform: scaleX(.33);
			}
		}
	}
}

